<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*最外边框*/
			
			.container {
				width: 200px;
				height: 400px;
				margin: 0 auto;
				border: 2px solid darkgrey;
			}
			/*标题框*/
			
			.titlebox {
				width: 200px;
				height: 25px;
				border-bottom: 2px solid darkgrey;
				background-color:  darkgrey;
			}
			/*中间容器*/
			
			.midcontainer {
				width: 200px;
				height: 280px;
				border-bottom: 2px solid darkgrey;
			}
			/*头像框*/
			
			.selfphotoc {
				width: 180px;
				height: 180px;
				margin: 7px;
				border: 2px solid darkgrey;
			}
			
			/*头像按钮框*/
			.pbutton{
				border: 1px solid darkgrey;
				border-top-left-radius: 30px;
				border-top-right-radius: 30px;
				border-bottom-left-radius: 30px;
				border-bottom-right-radius: 30px;
				width: 180px;
				height: 180px;
				background: url(selfphoto.png);
				margin: 0 auto;
				padding: 0 quto;
			}
			.photo {
				width: 180px;
				height: 180px;
			}
			/*底部容器*/
			
			.lowcontainer {
				text-align: center;
				width: 180px;
				height: 60px;
				margin: 15px;
			}
			
			p {
				text-align: center;
			}
			/*按钮样式*/
			
			input[type=button] {
				border: 2px solid darkgrey;
				background-color: white;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
		</style>
	</head>

	<body>
		<div class="container">
			<div class="titlebox">个人资料</div>
			<div class="midcontainer">
				<div class="selfphotoc"><input type="button" class="pbutton"/></div>
				<p><img src="name.png" /></p>
				<p><img src="logo.png" /></p>
			</div>
			<div class="lowcontainer">
				<input type="button" value="加好友" />
				<input type="button" value="发纸条" />
				<br/>
				<input type="button" value="写留言" />
				<input type="button" value="加关注" />
			</div>

		</div>
	</body>

</html>